<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>{$detail.deviceName|default=''}</title>
</head>
<input type="hidden" value="{$detail.id|default=''}" id="id">
<body>
<script src="../../../../live/ezuikit.js"></script>
<style>
    body{
        overflow: hidden;
        margin:0px;
        padding:0px;
    }
    body{
        text-align: center;
        -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none; /*火狐*/
        -ms-user-select:none;  /*IE10*/
        user-select:none;

    }
    .video{
        width:100%;
    }
    .zoom{
        display: inline-block;
        position: absolute;
        right:0px;
        top:10px;
    }
    .button{
        width:30px;
        height:30px;
        line-height: 40px;
        display: inline-block;
    }
    #far{
        background:url("../../../../live/ico/far.png");
        background-size:100%;
    }
    #near{
        background:url("../../../../live/ico/near.png");
        background-size:100%;
    }
    .zxd_main{
        display: inline-block;
        position: relative;
    }

    .zoom div{
        float: left;
        color: #FFFFFF;
        margin-right:20px;
        line-height:25px;
    }
    .zoom div a{
        color: #FFFFFF;
    }

</style>

<div class="zxd_main">



    <div id="video-container" style="width:100%; height:auto;"></div>
    <div class="zoom">
        {volist name="deviceSerial" id="vo"}
           <div><a href="/project/monitor/flv?id={$id}&index={$key}">{$vo}</a></div>
        {/volist}
        <div class='button' id="near"></div>
        <div class='button' id="far"></div>
    </div>
</div>
<script>
    var width = 1000;
    var height = width*0.73;
    var playr = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        accessToken: '{$token}',
        url: '{$detail.flvAddress}',
        //mobileLive
        template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        autoplay: true,
        // 视频上方头部控件
        header: ['capturePicture','save','zoom'],            // 如果templete参数不为simple,该字段将被覆盖
        // 视频下方底部控件
        footer: ['talk','broadcast','hd','fullScreen'],      // 如果template参数不为simple,该字段将被覆盖
        audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        plugin: ['talk','capturePicture','save','zoom'],                       // 加载插件，talk-对讲
        // openSoundCallBack: (data) => console.log("开启声音回调",data),
        // closeSoundCallBack: (data) => console.log("关闭声音回调",data),
        // startSaveCallBack: (data) => console.log("开始录像回调",data),
        // stopSaveCallBack: (data) => console.log("录像回调",data),
        // capturePictureCallBack: (data) => console.log("截图成功回调",data),
        // fullScreenCallBack: (data) => console.log("全屏回调",data),
        // getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
        // handleSuccess: (data) = function(){console.log("播放成功回调",data)},
        // handleError: (data) => console.log("播放失败回调",data),
        width:width,
        height:height,
    })
</script>
</body>

</html>